<template>
	<view class="page">
		<view class="content">
			<view class="title">
				<text class="title-text">请选择辞工原因？</text>
				<text class="title-text1">为了营造良好用工环境，如无特殊情况，请勿随意辞工！</text>
			</view>
			<view v-for="(items,index) in items_it" :key="index" :data-index="items.dictLabel"
				@click="onChecked($event,items)">
				<view class="item_it">
					<view class="item_it_str">
						<text class="item_it_str_text">{{items.dictLabel}}</text>
						<image v-show="title===items.dictLabel" class="item_it_str_selected"
							src="https://images.linglinggong.net/static/icon1/hdg.png" mode="aspectFill"></image>
						<view v-show="title!==items.dictLabel" class="item_it_str_select"></view>
					</view>
				</view>
			</view>
			<view class="butoon">
				<view v-if="!title" class="butoon1">提 交</view>
				<view v-if="title" @click="selectItem()" class="butoon2">提 交</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				items: [],
				items_it: [],
				item_index: -1,
				item_it_index: -1,
				isSelected: false,
				dictLabel: '',
				orderId: 0,
				ishow: false,
				title: ''
			}
		},
		methods: {
			onChecked(e) {
				this.title = e.currentTarget.dataset.index
				console.log(this.title)
			},
			//selectItem button点击事件
			async selectItem() {
				// let res = await this.$fetch(this.$api.resignation, {
				// 	orderId: this.id,
				// }, 'GET', 'form')
				let res = await this.$fetch(this.$api.resignation_sub, {
					'reason': this.title,
					'orderId': this.orderId
				}, 'GET')
				if (res.code) return uni.showToast({
					title: res.msg,
					icon: 'none'
				})
				// uni.navigateTo({
				// 	url: '/pages/index/index'
				// })
				uni.switchTab({
					url: '/pages/index/index'
				})
				uni.setStorageSync('breakNew', 1)
			},
			// cancel_list 获取取消愿意列表
			async get_cancel_list() {
				let res = await this.$fetch(this.$api.reason_for_resignation, {
					dictType: 'resignationReason'
				}, 'GET')
				if (res.code) return uni.showToast({
					title: res.msg,
					icon: 'none'
				})
				res.rows.forEach(v => {
					if (!this.items.includes(v.remark)) {
						this.$set(this.items, parseInt(v.dictSort) - 1, v.remark)
					}
				})
				this.items_it = res.rows
				// console.log(this.items,this.items_it)
			},
		},
		onLoad(value) {
			this.orderId = value.orderId
			this.get_cancel_list()
		},
		onShow() {
			this.get_cancel_list()
		},
		updated() {
			this.item_it_index != -1 && this.item_index != -1 ? this.isSelected = true : this.isSelected = false
		},
	}
</script>
<style lang="less" scoped>
	.page {
		width: 100%;
		min-height: 100vh;
		background: #FFFFFF !important;
		overflow: hidden;
	}

	.content {
		width: 694rpx;
		margin: 0 auto;
	}

	.title {
		height: 156rpx;
		display: flex;
		flex-direction: column;
		margin-top: 50rpx;
	}

	.title-text {
		font-size: 36rpx;
		font-weight: 800;
		color: #402110;
		line-height: 36rpx;
		margin-bottom: 20rpx;
		text-align: left;
	}

	.title-text1 {
		font-size: 24rpx;
		font-weight: 500;
		color: #FE4538;
		line-height: 24rpx;
		text-align: left;
		margin-top: 4rpx;
		font-weight: bold;
	}

	.item {
		background: #FFFFFF;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1rpx solid #F5F5F5;
	}

	.item-text {
		font-size: 32rpx;
		font-weight: bold;
		line-height: 32rpx;
		margin-left: 30rpx;
		font-weight: bold;
	}

	.item-imag {
		width: 36rpx;
		height: 36rpx;
		margin-right: 30rpx;
		transform: rotate(180deg);
	}

	.item-imag1 {
		width: 36rpx;
		height: 36rpx;
		margin-right: 30rpx;
	}

	.item_it {
		width: 100%;
		background-color: #FFFFFF;
		display: flex;
		justify-content: center;
		height: 120rpx;
		background: #F1F1F5;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		margin-bottom: 20rpx;
	}

	.butoon {
		height: 88rpx;
		position: fixed;
		bottom: 68rpx;
		display: flex;
		flex-direction: row;
		justify-content: center;
	}

	.butoon1 {
		width: 690rpx;
		height: 88rpx;
		background: #F1F1F5;
		border-radius: 12rpx;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

	.butoon2 {
		width: 690rpx;
		height: 100%;
		background: #FCC928;
		border-radius: 12rpx;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

	.item_it_str {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.item_it_str_text {
		font-size: 28rpx;
		font-weight: 500;
		color: #1A1A1A;
		line-height: 28rpx;
		margin-left: 20rpx;
		font-weight: bold;
	}

	.item_it_str_select {
		width: 35rpx;
		height: 35rpx;
		border: 1rpx solid #AFAFAF;
		border-radius: 50%;
		margin-right: 20rpx;
	}

	.item_it_str_selected {
		width: 36rpx;
		height: 36rpx;
		border-radius: 50%;
		margin-right: 20rpx;
	}
</style>